<template>
  <div class="search-container">
    <!-- 搜索区域 -->
    <div class="search-area">
      <el-row :gutter="20" justify="center">
        <el-col :span="12">
          <el-input 
            v-model="keyword" 
            placeholder="请输入搜索内容" 
            @keyup.enter="handleSearch" 
            clearable 
            size="large"
          />
        </el-col>
        <el-col :span="4">
          <el-select v-model="type" placeholder="请选择类型" size="large">
            <el-option label="帖子" value="posts" />
            <el-option label="社团" value="clubs" />
            <el-option label="评论" value="comments" />
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="handleSearch" size="large">搜索</el-button>
        </el-col>
      </el-row>
    </div>

    <el-divider />
    <!-- 搜索结果区域 -->
    <div v-if="results.length" class="results-container">
      <div class="results-header">
        <h3>搜索结果 ({{ results.length }}条)</h3>
      </div>
      
      <div v-for="item in results" :key="item.id" class="result-card">
        <!-- 帖子结果 -->
        <template v-if="type === 'posts'">
          <div class="result-header">
            <el-icon class="result-icon"><Document /></el-icon>
            <h4 class="result-title">{{ item.title }}</h4>
            <el-tag size="small" type="primary">帖子</el-tag>
          </div>
          <div class="result-content">
            <p class="content-preview">{{ item.content }}</p>
          </div>
          <div class="result-meta">
            <span class="meta-item">
              <el-icon><User /></el-icon>
              {{ item.author }}
            </span>
            <span class="meta-item" v-if="item.createTime">
              <el-icon><Clock /></el-icon>
              {{ formatDate(item.createTime) }}
            </span>
          </div>
        </template>
        
        <!-- 社团结果 -->
        <template v-else-if="type === 'clubs'">
          <div class="result-header">
            <el-icon class="result-icon"><UserFilled /></el-icon>
            <h4 class="result-title">{{ item.clubName }}</h4>
            <el-tag size="small" type="success">社团</el-tag>
          </div>
          <div class="result-content">
            <p class="content-preview">{{ item.description }}</p>
          </div>
          <div class="result-meta">
            <span class="meta-item">
              <el-icon><User /></el-icon>
              社长：{{ item.currentLeaderName }}
            </span>
            <span class="meta-item" v-if="item.memberCount">
              <el-icon><UserFilled /></el-icon>
              成员：{{ item.memberCount }}人
            </span>
          </div>
        </template>
        
        <!-- 评论结果 -->
        <template v-else>
          <div class="result-header">
            <el-icon class="result-icon"><ChatDotRound /></el-icon>
            <h4 class="result-title">评论内容</h4>
            <el-tag size="small" type="warning">评论</el-tag>
          </div>
          <div class="result-content">
            <p class="content-preview">{{ item.content }}</p>
          </div>
          <div class="result-meta">
            <span class="meta-item">
              <el-icon><User /></el-icon>
              {{ item.author }}
            </span>
            <span class="meta-item" v-if="item.createTime">
              <el-icon><Clock /></el-icon>
              {{ formatDate(item.createTime) }}
            </span>
          </div>
        </template>
      </div>
    </div>
    <div v-else class="no-result">暂无结果</div>
  </div>
</template>

<script>
import { searchPosts, searchClubs, searchComments } from '@/api/search'
import { Document, User, Clock, UserFilled, ChatDotRound } from '@element-plus/icons-vue'

export default {
  components: {
    Document,
    User,
    Clock,
    UserFilled,
    ChatDotRound
  },
  name: 'Search',
  data() {
    return {
      keyword: '',
      type: 'posts',
      results: []
    }
  },
  methods: {
    handleSearch() {
      if (!this.keyword) {
        this.$message.info('请输入搜索内容')
        return
      }
      this.performSearch()
    },
    performSearch() {
      let searchFn = searchPosts
      if (this.type === 'clubs') searchFn = searchClubs
      if (this.type === 'comments') searchFn = searchComments
      
      searchFn(this.keyword).then(res => {
        this.results = res || []
      }).catch(err => {
        console.error('搜索失败:', err)
        this.$message.error('搜索失败，请稍后重试')
        this.results = []
      })
    },
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.search-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.search-area {
  margin-bottom: 30px;
}

.results-container {
  margin-top: 20px;
}

.results-header {
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid transparent;
}

.results-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.result-card {
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.result-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}

.result-icon {
  font-size: 18px;
  color: #409eff;
}

.result-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
}

.result-content {
  margin-bottom: 12px;
}

.content-preview {
  margin: 0;
  color: #666;
  line-height: 1.6;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  color: #999;
  font-size: 13px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-item .el-icon {
  font-size: 14px;
}

.no-result {
  text-align: center;
  color: #888;
  margin-top: 60px;
  font-size: 16px;
  padding: 40px;
}

/* 简化按钮样式，避免复杂动画 */
.el-button {
  transition: none;
}

/* 优化输入框样式 */
.el-input, .el-select {
  width: 100%;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-container {
    padding: 10px;
  }
  
  .search-area .el-col {
    margin-bottom: 10px;
  }
  
  .result-card {
    padding: 15px;
  }
  
  .result-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>